---
title: Complex structures
description: Learn to create complex form structures using Unform
---

Most of the time, the form structure is based on how data is received or 
restored from the back-end, including relationships and complex data structures.

While using Unform, you can use the dot notation inside the input name to nest 
structures like objects or arrays.

```jsx
<Input name="author.name" /> // { author: { name: 'Diego' } }
<Input name="lessons[0].name" /> // { lessons: [{ name: 'Lesson 01' }] }
<Input name="some.complex[0].data[0].structure" /> // You already got it
```

To do so, use the `Scope` component to create children structures easily:

```jsx lineNumbers=true
import { Form, Scope } from '@unform/core';

export default function CourseForm() {
  function handleSubmit(data) {
    console.log(data);

    /**
     * {
     *   title: 'Course title',
     *   author: {
     *     name: 'John Doe',
     *   },
     *   modules: [
     *     {
     *       title: 'Module 01',
     *       lessons: [
     *         { title: 'Lesson 01' },
     *         { title: 'Lesson 02' },
     *       ]
     *     },
     *     {
     *       title: 'Module 02',
     *       lessons: [
     *         { title: 'Lesson 03' },
     *         { title: 'Lesson 04' },
     *       ]
     *     }
     *   ]
     * }
     */
  }

  return (
    <Form onSubmit={handleSubmit}>
      <Input name="title" />
      <Input name="author.name" />

      <Scope path="modules[0]">
        <Input name="title" />

        <Input name="lessons[0].videoId" />
        <Input name="lessons[1].videoId" />
      </Scope>

      <Scope path="modules[1]">
        <Input name="title" />

        <Input name="lessons[0].videoId" />
        <Input name="lessons[1].videoId" />
      </Scope>
    </Form>
  );
}
```
